<template>
  <a-modal :title="model && model.id ? '编辑' : '新增'" :width="900" :height="360" :visible="visible"
    :confirmLoading="loading" @ok="handleOK" @cancel="() => {
      $emit('cancel')
    }
      ">
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <a-form-item label="id" style="display: none">
          <a-input v-decorator="['id']" />
        </a-form-item>
        <a-form-item label="抽奖名称">
          <a-input v-decorator="['riName', { rules: [{ required: true, message: '请输入抽奖名称' }] }]" />
        </a-form-item>
        <!-- <a-form-item label="抽奖数量">
          <a-input v-decorator="['riAmount', { rules: [{ required: true, message: '请输入抽奖数量' }] }]" />
        </a-form-item> -->
        <!-- <a-form-item label="每天奖品数量设置">
          <a-input v-decorator="['riPrizeSetting', { rules: [{ required: true, message: '请输入每天奖品数量设置' }] }]" />
        </a-form-item> -->
        <a-form-item label="开始时间">
          <a-date-picker
            valueFormat="YYYY-MM-DD"
            v-decorator="[
              'riStartDay',
              {rules: [{ required: true, message: '请选择开始时间' }]}
            ]" />
        </a-form-item>
        <a-form-item label="结束时间">
          <a-date-picker
            valueFormat="YYYY-MM-DD"
            v-decorator="[
              'riEndDay',
              {rules: [{ required: true, message: '请选择开始时间' }]}
            ]" />
        </a-form-item>
        <a-form-item label="抽奖活动描述（图片展示）">
          <a-upload name="file" list-type="picture-card" class="avatar-uploader" accept="image/png, image/jpeg"
            :show-upload-list="false" :action="uploadApi" @change="handleChange" v-decorator="[
              'riNote',
              {
                valuePropName: 'file',
                getValueFromEvent: normFile,
                rules: [{ required: true, message: '请上传图片' }],
              },
            ]">
            <img v-if="fileList && fileList[0]" :src="fileList[0].response.data.src" alt="avatar" width="80"
              height="80" />
            <div v-else>
              <a-icon type="plus" />
              <div class="ant-upload-text">上传</div>
            </div>
          </a-upload>
          <a-icon class="loading" type="loading" v-if="picLoading" />
        </a-form-item>
        <a-form-item label="奖品列表">
          <a-button type="primary" @click="handleAdd">新建</a-button>
          <div class="gift" v-for="(item, index) in giftList">
            <a-input style="width: 200px;margin-right: 10px;" v-model="item.giftName" placeholder="奖品名称" />
            <a-input style="width: 180px;margin-right: 10px;" v-model="item.giftAmount" placeholder="奖品数量" />
            <a-upload name="file" list-type="picture-card" class="avatar-uploader" accept="image/png, image/jpeg"
            :show-upload-list="false" :action="uploadApi" @change="handleGift($event, index)">
              <img v-if="giftList && giftList[index].giftPic" :src="giftList[index].giftPic" alt="avatar" width="80"
                height="80" />
              <div v-else>
                <a-icon type="plus" />
                <div class="ant-upload-text">上传</div>
              </div>
            </a-upload>
            <!-- <a-icon class="loading" type="loading" v-if="logoLoading" /> -->
            <a-button type="danger" @click="handleDelete(index)">
              删除
            </a-button>
          </div>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
  
<script>
import pick from 'lodash.pick'
import api from '@/api/banner'
import WangEditor from '@/components/Editor/WangEditor.vue'

// 表单字段
const fields = ['id', 'riEndDay', 'riName', 'riNote',  'riStartDay', 'gift']
const baseApi = process.env.VUE_APP_API_BASE_URL
import { rewardInfoDetail } from '@/api/base'
export default {
  components: { WangEditor },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    model: {
      type: Object,
      default: () => null,
    },
  },
  data() {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
    }
    return {
      form: this.$form.createForm(this),
      uploadApi: baseApi + api.upload,
      fileList: [],
      giftList: [],
      picLoading: false
    }
  },
  created() {
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v))

    // 当 model 发生改变时，为表单设置值
    // this.$watch('model', () => {
    //   if (this.model) {
    //     this.fileList = [
    //       {
    //         response: { data: { src: this.model.riNote } },
    //         uid: '-' + this.model.id,
    //         name: this.model.id,
    //         status: 'done',
    //       },
    //     ]
    //     this.giftList = this.model.gift || []
    //     this.form.setFieldsValue(pick(this.model, fields))
    //   }
    // })
  },
  methods: {
    normFile(e) {
      if (e.file.response && e.file.response.data) {
        // this.form.setFieldsValue({ srcSave: e.file.response.data.srcSave })
        return e.file.response.data.src
      }
      return ''
    },
    handleAdd() {
      this.giftList.push({})
    },
    handleDelete(index) {
      this.giftList.splice(index, 1)
    },
    handleChange(info) {
      if (info.file.status === 'uploading') {
        this.picLoading = true
        return
      }
      if (info.file.status === 'done') {
        this.fileList = info.fileList.slice(-1)
        this.picLoading = false
      }
    },
    async getRewardInfoDetail(id) {
      const res = await rewardInfoDetail(id)
      if (!res.success) return
      this.form.setFieldsValue(pick(res.data, fields))
      this.fileList = [
        {
          response: { data: { src: res.data.riNote } },
          name: res.data.id,
          status: 'done',
        },
      ]
      this.giftList = res.data.gift.map(i => {
        return {
          giftName: i.giftName,
          giftAmount: i.giftAmount,
          id: i.id,
          giftPic: i.giftPic
        }
      })
    },
    handleGift(info, index) {
      if (info.file.status === 'done') {
        this.giftList[index].giftPic = info.file.response.data.src
        this.giftList =  Object.assign([], this.giftList)
      }
    },
    handleCheck() {
      
    },
    handleOK() {
      // this.form.setFieldsValue({ gift: this.giftList })
      this.$emit('ok')
    },
  },
}
</script>
<style scoped>
.avatar-uploader>.ant-upload {
  width: 128px;
  height: 128px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
.gift {
  display: flex;
  margin-top: 15px;
}
</style>
  